<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器和盒子模型</title>
<style>
    body {
        background-image: url('./img/小医仙.png');
        background-repeat: no-repeat;
        background-size: 60%;
        background-position: right 59px;
    }
    /* 基础选择器示例 */
    p {
        color: blue; /* 标签选择器 */
    }

    .class-selector {
        color: red; /* 类选择器 */
    }

    #id-selector {
        color: green; /* ID选择器 */
    }

    * {
        font-family: '新宋体', sans-serif; /* 通配符选择器 */
    }

    /* 属性选择器示例 */
    [title="example"] {
        color: purple; /* 属性选择器 */
    }

    /* 关系选择器示例 */
    div p {
        color: orange; /* 后代选择器 */
    }

    ul > li {
        color: teal; /* 子代选择器 */
    }

    h2 + p {
        color: brown; /* 相邻兄弟选择器 */
    }

    h2 ~ p {
        color: navy; /* 通用兄弟选择器 */
    }

    /* 伪元素选择器示例 */
    p::before {
        color: magenta; /* 伪元素选择器 */
    }

    /* 链接伪类示例 */
    a:link {
        color: maroon; /* 未访问链接 */
    }

    a:hover {
        color: olive; /* 鼠标悬停链接 */
    }

    /* 结构伪类示例 */
    li:first-child {
        color: violet; /* 第一个子元素 */
    }

    li:last-child {
        color: cyan; /* 最后一个子元素 */
    }

    li:nth-child(odd) {
        color: indigo; /* 奇数位置子元素 */
    }

    li:nth-child(even) {
        color: darkorange; /* 偶数位置子元素 */
    }

    /* 输入伪类示例 */
    input:enabled {
        color: darkred; /* 可用状态 */
    }

    input:disabled {
        color: darkgreen; /* 禁用状态 */
    }

    input:checked {
        color: darkblue; /* 已选中状态 */
    }

    /* 位置伪类示例 */
    :target {
        color: darkslategray; /* 当前URL片段标识符对应的元素 */
    }

    /* 语言伪类示例 */
    p:lang(en) {
        color: darkgoldenrod; /* 英文语言元素 */
    }
       /* 盒子模型样式 */
       .box {
        width: 300px;
        height: 200px;
        border-top: 5px solid blue; /* 上边框 */
        border-bottom: 10px dotted green; /* 下边框 */
        border-left: 15px double orange; /* 左边框 */
        border-right: 20px dashed purple; /* 右边框 */
        padding: 20px; /* 内边距 */
        margin: 30px; /* 外边距 */
    }
        .box img {
            width: 300px;
            height: 200px;
            border-radius: 10px;
            transition: 0.2s linear;
        }
        .box img:hover {
            transform: scale(1.1);
        }
        footer {
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-weight: 600;
        }
</style>
</head>
<body>
    
    <h1 style="color: black; font-size: 40px;">CSS选择器-详细请ctrl+u看代码注释</h1>
    

    <!-- 基础选择器示例 -->
    <p>这是使用标签选择器的段落。</p>
    <p class="class-selector">这是使用类选择器的段落。</p>
    <p id="id-selector">这是使用ID选择器的段落。</p>
    <p title="example">这是使用属性选择器的段落。</p>

    <!-- 关系选择器示例 -->
    <div>
        <p>这个段落在div中。</p>
    </div>

    <!-- 伪元素选择器示例 -->
    <p>这个段落之前有一个星星。</p>

    <!-- 链接伪类示例 -->
    <a href="#">这是一个伪类hover</a>

    <!-- 结构伪类示例 -->
    <ul>
        <li>项目 1</li>
        <li>项目 2</li>
        <li>项目 3</li>
    </ul>

    <!-- 输入伪类示例 -->
    <input type="text" value="可用输入框">
    <input type="text" value="禁用输入框" disabled>
    <input type="checkbox" checked> 已选中

    <!-- 位置伪类示例 -->
    <div id="section1">
        <h2>第一部分</h2>
        <p>这是第一部分的内容。</p>
    </div>

    <div id="section2">
        <h2>第二部分</h2>
        <p>这是第二部分的内容。</p>
    </div>

    <!-- 语言伪类示例 -->
    <p lang="en">这个段落是英文的。</p>

    <!-- 逻辑伪类示例 -->
    <p class="exclude">这个段落被排除了。</p>
    <p>这个段落被包含了。</p>

    <h1>盒子模型</h1>
    <div class="box">

        <img src="./img/1.jpg" alt="1">
    </div>

    <footer>&copy;版权归我所有</footer>
</body>
</html>
